<template>
  <el-menu-item
    v-if="!item.children || item.children.length === 0"
    :index="basePath"
    class="submenu-title-noDropdown"
  >
    <Icon :name="item.meta?.icon" />
    <span>{{ item.meta?.title }}</span>
  </el-menu-item>

  <el-sub-menu v-else :index="basePath">
    <template #title>
      <Icon :name="item.meta?.icon" />
      <span>{{ item.meta?.title }}</span>
    </template>
    <SidebarItem
      v-for="child in item.children"
      :key="child.path"
      :item="child"
      :base-path="child.path"
    />
  </el-sub-menu>
</template>
<script setup lang="ts">
const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true,
  },
  basePath: {
    type: String,
    default: '',
  },
})
</script>
